<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <el-menu active-text-color="#ffd04b" router background-color="#545c64" class="el-menu-vertical-demo"
                    default-active="2" text-color="#fff">
                    <!-- 无子集 -->
                    <el-menu-item :index="item.auth_path" v-for="item in acl" v-show="item.children.length == 0">
                        <span>{{ item.auth_name }}</span>
                    </el-menu-item>

                    <!-- 有子集 -->
                    <el-sub-menu :index="item.auth_path" v-for="item in acl" v-show="item.children.length != 0">
                        <template #title>
                            <span>{{ item.auth_name }}</span>
                        </template>
                        <el-menu-item :index="child.auth_path" v-for="child in item.children" v-show="child.is_nav == 1">
                            <span>{{ child.auth_name }}</span>
                        </el-menu-item>
                    </el-sub-menu>

                </el-menu>

            </el-aside>
            <el-container>
                <el-header>
                    <button @click="loginoutFn">注销登录</button>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()
const acl = JSON.parse(localStorage.getItem('acl'))
//退出登录
const loginoutFn = () => {
    localStorage.removeItem('acl')
    localStorage.removeItem('jwt')
    router.push('/login')
}
//检查是否登录
if (localStorage.getItem('acl') == null || localStorage.getItem('jwt') == null) {
    router.push('/login')
}

</script>
<style scoped lang="scss">
.common-layout,
.el-aside,
.el-menu,
.el-container {

    height: 100%;
}
</style>